<template>
  <div class="hello">

    <!--
    <h2> {{ $store.state.name}}</h2>
    <h2  v-text="username"></h2>

   <input v-model="search" @keyup.enter="enter" type="text " placeholder="搜索"><input @click="cli" type="submit" value="搜索">
       <ul>
      <li v-for="(item,index) in list" :key="item.id">
                  {{index+1}}名字:{{item.name}}
                     <img :src="'../static'+item.pic">
              </li>
      </ul> -->
  <div class="wrap">
       <!-- 播放器主体区域 -->
       <div class="play_wrap" id="player">
           <div class="search_bar">
               <img src="../../static/images/player_title.png" alt="" />
               <!-- 搜索歌曲 -->
               <input type="text" autocomplete="off"
                      v-model="query"
                      @keyup.enter="searchMusic"
                      placeholder="输入搜索信息并回车"
               />
           </div>
           <div class="center_con">
               <!-- 搜索歌曲列表 -->
               <div class="song_wrapper">
                   <ul class="song_list">
                       <li v-for="item in musicList" :key="item.name"><!--循环出来-->
                           <!--将音乐的id传过去-->
                           <a href="javascript:;" @click="playMusic(item.id)"></a>
                           <b >{{item.name}}</b><!--歌曲名-->
                           <span v-show="item.mvid!=0" @click="playMV(item.mvid)"><i></i></span>
                       </li>
                   </ul>
                   <img src="../../static/images/line.png" class="switch_btn" alt="">
               </div>
               <!-- 歌曲信息容器 -->
               <!-- class="player_con" class="playing" -->
               <div class="player_con" :class="{playing:isplaying}"><!--通过isplaying的真假播放动画-->
                   <img src="../../static/images/player_bar.png" class="play_bar" />
                   <!-- 黑胶碟片 -->
                   <img src="../../static/images/disc.png" class="disc autoRotate" />
                   <img :src="picurl" class="cover autoRotate" /><!--显示歌曲图片路径-->
               </div>
               <!-- 评论容器 -->
               <div class="comment_wrapper">

                   <input v-model="search" @keyup.enter="enter" type="text " placeholder="搜索"><input @click="cli" type="submit" value="搜索">
   <h5 class="title">热门留言</h5>
                       <!-- <h1 v-show="shows">前后端交互成功</h1> -->
                       <ul v-show="shows">
                      <li  v-for="(item,index) in list" :key="item.id">
                                  {{index+1}}名字:{{item.name}}
                                     <img :src="'../static'+item.pic">
                              </li>
                      </ul>
                   <div class="comment_list">
                       <dl v-for="item in remarkList" :key="item.user.nickname">
                           <dt><img :src="item.user.avatarUrl" alt=""></dt>
                           <dd class="name" v-text="item.user.nickname"></dd>
                           <dd class="detail">
                               {{item.content}}
                           </dd>
                       </dl>
                   </div>
                   <img src="../../static/images/line.png" class="right_line">
               </div>
           </div>
           <div class="audio_con">
               <!--musicurl显示音乐的地址-->
               <audio ref="audio"  @play="play" @pause="pause" :src="musicurl" controls autoplay loop class="myaudio"></audio>
           </div>
           <div class="video_con"  v-if="isPlayMV"  ><!--isPlayMV的真假来控制显示视频-->
               <video :src="mvurl" poster="images/1.jpg" controls="controls"></video>
               <div class="mask" @click="closeMV">关闭</div><!--关闭mv-->
           </div>
       </div>
   </div>
  </div>

</template>

<script>
// vue代码一定要注意空格
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      username: '小刘',
      list: [],
      query: '许嵩', // 查询默认许嵩的哥
      musicList: [], // 歌曲数组
      musicurl: '', // 音乐的地址
      picurl: 'images/cover.png', // 音乐的封面
      remarkList: [], // 用来接收评论
      isplaying: false, // 判断播放动画
      mvurl: '', // mv的url
      // 是否播放mv(遮罩层的显示状态)
      isPlayMV: false,
      shows: false // 显示前后端交互成功的显示
    }
  },
  created: function () { // created:function () 可以直接发送请求
    var that = this// 用来间接接受
    this.$axios.post('https://autumnfish.cn/search?keywords=' + this.query).then(
      function (response) {
        console.log(response)
        that.musicList = response.data.result.songs // 查询到的歌曲列表
        that.shows = false
      }
    ).catch(function (errnoError) {
      console.log('查询到的歌曲列表访问出错')
    })
  },
  methods: {
    cli () {
      var that = this// 用来间接接受
      this.$axios.post('/selall?index=1&limit=3').then(res => {
        console.log(res)
        this.list = res.data.data
        that.shows = true
        console.log('显示吗' + that.shows)
      })
    },
    enter () {
      var that = this// 用来间接接受
      this.$axios.post('/selall?index=1&limit=3').then(function (res) {
        /* res => {}和function (res)一样 */
        console.log(res)
        this.list = res.data.data
        that.shows = true
        console.log('显示吗' + that.shows)
      })
    },
    searchMusic () {
      var that = this// 用来间接接受
      this.$axios.post('https://autumnfish.cn/search?keywords=' + this.query).then(
        function (response) {
          console.log(response)
          that.musicList = response.data.result.songs // 查询到的歌曲列表
          that.shows = false
        }
      )
    },
    playMusic: function (songid) { // 播放音乐的方法
      var that = this
      // 根据id查找哥名，获取歌曲地址
      // eslint-disable-next-line
      this.$axios.post('https://autumnfish.cn/song/url?id=' + songid).then(
        function (response) {
          console.log(response)
          console.log(response.data.data[0].url)
          that.musicurl = response.data.data[0].url// 找到音乐数组的第一个
          that.shows = false
        }
        // eslint-disable-next-line
      ),
      // 获取封面的地址
      this.$axios.post('https://autumnfish.cn/song/detail?ids=' + songid).then(function (response) {
        console.log(response)
        that.picurl = response.data.songs[0].al.picUrl // 获取封面信息
      }),
      // 歌曲评论
      this.$axios.post('https://autumnfish.cn/comment/hot?type=0&id=' + songid).then(
        function (response) {
          console.log(response)
          that.remarkList = response.data.hotComments
        }
      )
    },
    // 开始播放，控制旋转
    play: function () {
      this.isplaying = true
    },
    // 停止播放，控制旋转
    pause: function () {
      this.isplaying = false
    },
    playMV: function (mvid) {
      var that = this
      this.$axios.post('https://autumnfish.cn/mv/url?id=' + mvid).then(function (response) {
        console.log(response)
        that.mvurl = response.data.data.url
        that.isPlayMV = true// 开始显示视频
        that.isplaying = false// 停止动画
        that.musicurl = ''// 停止音乐
      })
    },
    // 关闭MV
    closeMV: function () {
      this.isPlayMV = false
    }
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
   @import "../../static/index.css";
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
